<template>
	<view>
		<view class="bcg">
			<view class="nvtabbar">
				<view class="">
					<view class="texts">{{info.itemName}}</view>
					<view class="texts1">创建时间：{{info.createTime}}</view>
					<view class="texts1" v-if="info.itemStatus == 9">完成时间：{{info.itemStatusTime}}</view>
				</view>
				<view class="biaoqian" v-if='info.itemStatus == 2'>进行中</view>
				<view class="biaoqian wancheng" v-if='info.itemStatus == 9'>已完成</view>
			</view>
			<view class="content1">
				<view class="price">
					{{info.itemAmount}}
				</view>
				<view class="info_flex">
					<view class="">序号:{{index+1}}</view>
					<view class="g">|</view>
					<view class="">ID:{{info.id}} </view>
					<view class="g">|</view>
					<view class="">地区:{{info.areaName}} </view>
				</view>
			</view>
			<view class="content2">
				<view class="navbar">
					<view class="navbar_t">人工成本</view>
					<view class="navbar_p">￥{{info.cost.sum}}</view>
				</view>
				<view class="conts">
					<view class="ts1">
						<view class="txt1">
							<view class="d"></view>
							总计测绘人工成本</view>
						<view class="price">￥{{info.cost.surveying.sum}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">测绘人员数量</view>
						<view class="">{{info.cost.surveying.user_count}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">合计工资</view>
						<view class="">￥{{info.cost.surveying.amount_salary}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">合计五险一金</view>
						<view class="">￥{{info.cost.surveying.amount_si}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">合计项目提成</view>
						<view class="">￥{{info.cost.surveying.amount_commission}}</view>
					</view>
				</view>
				
				
				<view class="conts">
					<view class="ts1">
						<view class="txt1">
							<view class="d"></view>
							总计设计人工成本</view>
						<view class="price">￥{{info.cost.design.sum}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">设计人员数量</view>
						<view class="">{{info.cost.design.user_count}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">合计工资</view>
						<view class="">￥{{info.cost.design.amount_salary}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">合计五险一金</view>
						<view class="">￥{{info.cost.design.amount_si}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">合计项目提成</view>
						<view class="">￥{{info.cost.design.amount_commission}}</view>
					</view>
				</view>
			</view>
			<!-- 报销成本 -->
			<view class="content2" v-if="reimburseListth != 0">
				<view class="navbar">
					<view class="navbar_t">报销成本</view>
					<view class="navbar_p">￥{{info.reimburse.sum}}</view>
				</view>
				<view class="conts1" v-for="(item,index) in info.reimburse.reimburseList" :key="index">
					<view class="jb">{{index+1}}</view>
					<view class="jus-c-b">
						<view class="">报销金额</view>
						<view class="">￥{{item.applyAmount}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">报销时间</view>
						<view class="">{{item.applyTime}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">报销岗位</view>
						<view class="">{{item.userRole}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">报销人员姓名</view>
						<view class="">{{item.userName}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">报销费用说明</view>
						<view class="">{{item.applyContent}}</view>
					</view>
					
				</view>
			</view>
			<!-- 外包 -->
			<view class="content2" v-if="itemOutListth != 0">
				<view class="navbar">
					<view class="navbar_t">外包成本</view>
					<view class="navbar_p">￥{{info.itemOut.sum}}</view>
				</view>
				<view class="conts1" v-for="(item,index) in info.itemOut.itemOutList" :key="index">
					<view class="jb">{{index+1}}</view>
					<view class="jus-c-b">
						<view class="">项目名称</view>
						<view class="">{{info.itemName}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">外包时间</view>
						<view class="">{{item.outTime}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">外包单位名称</view>
						<view class="">{{item.outName}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">外包项目内容</view>
						<view class="">{{item.outContent}}</view>
					</view>
					<view class="jus-c-b">
						<view class="">外包费用</view>
						<view class="">￥{{item.workAmount}}</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {
		getListInfo
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
                info:{
					cost:{
						design:{
							user_count:0
						}
					}
				},
				index:0,
				reimburseListth:0,
				itemOutListth:0,
			};
		},
		onLoad(params) {
			console.log(params);
			this.index = params.index*1
			getListInfo({id:params.id}).then(res=>{
				this.info = res.data
				this.reimburseListth = res.data.reimburse.reimburseList.length
				this.itemOutListth = res.data.itemOut.itemOutList.length
				console.log(this.info);
			})
		}
	}
</script>

<style lang="less">
	.bcg {
		background: linear-gradient(#1E6BF7, #A8C3F6, #F3F3F5);
	}

	.nvtabbar {
		display: flex;
		align-items: center;
		width: 662rpx;
		margin: 0rpx 44rpx;
		padding-top: 20rpx;
		justify-content: space-between;
		.texts {
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
		}
		.texts1 {
			color: #fff;
			font-size: 24rpx;
			margin-top: 10rpx;
		}

		.biaoqian {
			width: 84rpx;
			height: 34rpx;
			background: #E1FCF9;
			border-radius: 4rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #00C8AE;
			line-height: 50rpx;
		}
		.wancheng {
			background: #F2F2F2 !important;
			color: #989898 !important;
		}
	}
	.content1{
		background-color: #fff;
		width: 700rpx;
		border-radius: 20rpx;
		height: 142rpx;
		margin: 37rpx auto;
		padding: 30rpx 26rpx;
		box-sizing: border-box;
		line-height: 50rpx;
		.price{
			color: #ff9534;
			font-weight: 600;
			font-size: 36rpx;
		}
		.info_flex{
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #141414;
			.g{
				margin: 0 20rpx;
			}
		}
	}
	.content2{
		background-color: #fff;
		width: 700rpx;
		border-radius: 20rpx;
		margin: 37rpx auto;
		padding: 40rpx 26rpx;
		box-sizing: border-box;
		.navbar{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.navbar_t{
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #065CF7;
				line-height: 48rpx;
			}
			
			.navbar_p{
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 26rpx;
			color: #FF8207;
			line-height: 48rpx	
			}
		}
		.conts{
			border-bottom: 1px solid #DEE7F5;
			padding:29rpx 10rpx;
			.ts1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: normal;
				font-size: 30rpx;
				color: #3D5A82;
				line-height: 48rpx;
			}
			.txt1{
				display: flex;
				align-items: center;
				.d{
					width: 8rpx;
					height: 8rpx;
					background-color: black;
					border-radius: 50%;
					margin-right: 14rpx;
				}
			}
		}
		.conts1{
			width: 650rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			margin: 24rpx 0rpx;
			.jb{
				width: 60rpx;
				height: 30rpx;
				background: #00C8AE;
				border-radius: 10rpx 0rpx 10rpx 0rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
				line-height: 30rpx;
			}
		}
	}
	.jus-c-b{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #60728A;
		line-height: 46rpx;
	}
</style>